<template>
  <div class="body-bg">
    <div class="content">
      <div class="content-queue">
        <div class="video-queue">
          <div class="video-queue-title">
            <span class="video-queue-title-text">发布视频</span>
            <div class="video-queue-title-btn-wrp">
              <button v-if="uploadList.length > 1" class="bcc-button video-queue-title-btn bcc-button--default small">
                <span>批量操作</span>
              </button>
              <button v-else class="bcc-button video-save-btn small" @click="addVideoItem">
                <span>添加视频</span>
              </button>
            </div>
          </div>
          <div class="task-list" v-if="uploadList.length > 1">
            <div @click="taskSelect = index;changeFormList(index,true)" v-for="(item,index) in uploadList" :key="index"
                 class="task-item" style="width: 218px;">
              <div :title="item.title" class="task"
                   :class="[{taskNotSelected:taskSelect != index},{taskSelected:taskSelect === index}]"
                   style="margin-right: 10px; margin-bottom: 10px;">
                <div class="task-title">
                  <span class="task-title-icon"></span>
                  <span class="text" style="width: calc(100%);">{{ item.title }}</span>
                </div>
                <div class="task-status" :class="[{taskStatusSuccess:taskSelect != index}]">
                  <span class="iconfont icon-shangchuanchenggong"></span>
                  <span style="font-size: 10px" class="text">上传完成</span>
                </div>
                <div style="font-size: 10px" v-if="taskSelect === index" class="task-delete">
                  <span class="iconfont icon-fork"></span>
                </div>
              </div>
            </div>
            <div class="title-btn" @click="addVideoItem">
              <div>
                <span class="iconfont icon-jiahao"></span>
              </div>
              <div>添加视频</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-detail">
      <div class="video-basic-wrp">
        <div class="video-basic">
          <div class="video-file">
            <div class="title">
              <!--文件名字-->
              <div class="title-text">QQ录屏20231103140941</div>
            </div>
            <div class="file">
              <div class="video-icon-wrp">
                <img style="width: 33px;height: 38px" alt="" :src="require('/src/assets/img/shipinwenjian.png')"/>
              </div>
              <!--上传视频 start-->
              <!--       :on-success="handleAvatarSuccess"             action="http://127.0.0.1:9090/hilihili/video/upload"-->
              <div v-show="!uploadSuccess">
                <el-upload
                    :http-request="uploadVideo"
                    ref="upload"
                    class="avatar-uploader el-upload--text"
                    :show-file-list="false"
                    :before-upload="beforeUploadVideo"
                    :on-success="uploadSuc"
                    style="border: 1px solid #DCDFE6;border-radius: 4px;padding: 10px;"
                >
                  <el-button v-if="videoSrc !='' && progressFlag == false" :src="videoSrc" class="avatar "
                             controls="controls">您的浏览器不支持视频播放
                  </el-button>
                  <div class="el-upload__tip upload-button" style="color: #000000;"> 请保证视频格式正确，且不超过10M。</div>
                </el-upload>
              </div>

              <!--上传视频 end-->
              <div class="file-detail"><!---->
                <div v-if="uploadSuccess" class="file-status">
                  <div class="file-status-text">
                    <img style="width: 15px;height: 15px;margin-right: 5px" alt=""
                         :src="require('/src/assets/img/chenggong.png')"/>
                    <span class="success">上传完成</span>
                  </div>
                  <div class="file-status-manage file-status-manage-refresh " @click="replaceVideo()">
                    <span style="margin-right: 5px" class="iconfont icon-xunhuan"></span>
                    更换视频
                  </div>
                </div>
                <div class="file-progress">
                  <div class="file-progress-div"></div>
                  <el-progress :percentage="loadProgress" :stroke-width="4" :status="status"/>
                </div>
              </div>
            </div>
          </div>
          <div class="form">
            <el-form label-width="80px" :model="form" :rules="rules" ref="ruleForm" status-icon>
              <el-form-item v-show="uploadSuccess" label="封面" prop="imageUrl">
                <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :auto-upload="false"
                    :multiple="false"
                    :on-change="uploadFile"
                    accept="image/jpg,image/jpeg,image/png">
                  <!--删除按钮 x-->
                  <span v-if="image" class="iconfont icon-fork deleteImg" @click.stop="handleRemove"></span>
                  <img v-if="image" :src="image" class="avatar" style="max-width: 100%;height: auto"/>
                  <div v-else class="avatar-uploader-icon">
                    <div style="margin-top: 20px;">
                      <img style="width: 30px;height: 30px" alt="" :src="require('/src/assets/img/tupian.png')"/>
                    </div>
                    <div>上传图片</div>
                    <div>格式为png、jpeg或jpg</div>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="标题" prop="title">
                <el-input
                    v-model="form.title"
                    maxlength="88"
                    placeholder="请输入稿件标题"
                    show-word-limit
                    type="text"
                />
              </el-form-item>
              <el-form-item label="类型" prop="type" :class="{marginBut:form.isTransfer === '2'}">
                <el-radio-group v-model="form.isTransfer">
                  <el-radio label="1">自制</el-radio>
                  <el-radio label="2">转载</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="form.isTransfer === '2'" prop="transferAddress">
                <el-input
                    v-model="form.transferAddress"
                    maxlength="200"
                    placeholder="转载视频请注明来源、时间、地点(例: 转自https://www.xxx.com/yyy). 注明来源会更快地通过审核哦"
                    show-word-limit
                    type="text"/>
              </el-form-item>
              <el-form-item label="分区" prop="district">
                <el-cascader v-model="form.district" placeholder="选择分区" :props="districtData" :options="options"
                             @change="getTag"/>
              </el-form-item>
              <el-form-item label="标签">
                <div class="tag-container">
                  <div class="tag-input-wrp">
                    <div class="input-container">
                      <div class="tag-pre-wrp">
                        <!--话题标签部分-->
                        <div v-if="themLabelTitle != ''" class="label-item-v2-container">
                          <span class="iconfont icon-jiazaishibai" style="font-size: 14px;margin-right: 5px"></span>
                          <span class="label-item-v2-content">{{ themLabelTitle }}</span>
                          <span @click="themLabelTitle = '';themLabelIndex = -1" class="iconfont icon-fork"
                                style="font-size: 12px;margin-left: 5px"></span>
                        </div>
                        <!--标签循环部分-->
                        <div v-for="(item,index) in labelListCopy" :key="index" class="label-item-v2-container">
                          <span class="label-item-v2-content">{{ item.label }}</span>
                          <span
                              @click="labelListCopy.splice(index, 1);changeLabelStyle(false, item.index);labelCount += 1"
                              class="iconfont icon-fork" style="font-size: 12px;margin-left: 5px"></span>
                        </div>
                      </div>
                      <div class="input-instance">
                        <input @keyup.enter="keyEnter()" v-model="inputValue" type="text" maxlength="20"
                               placeholder="按回车键Enter创建标签" class="input-val"/>
                      </div>
                      <p class="tag-last-wrp"> 还可以添加{{ labelCount }}个标签 </p>
                    </div>
                  </div>
                </div>
                <!--推荐标签区域-->
                <div style="margin-top: 15px;width:800px">
                  <div class="tag-wrp">
                    <p class="tag-label">推荐标签：</p>
                    <div class="tag-list">
                      <div @click="addLabelList(item,index)" :ref="'labelRef' + item.index"
                           v-for="(item,index) in labelList" :key="index" class="hot-tag-container2">
                        <div class="hot-tag-item">
                          <span>{{ item.label }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tag-wrp">
                    <p class="tag-label">参与话题：</p>
                    <div class="tag-topic-wrp">
                      <div class="tag-topic-list">
                        <span @click="themLabelTitle = item.label;themLabelIndex = index;topic = item"
                              v-for="(item,index) in themeList" :key="index">
                          <div class="hot-tag-container"
                               :class="{'hot-tag-container-next':themLabelIndex != index,taskSelected:themLabelIndex === index}">
                            <div class="hot-tag-item">
                              <span class="iconfont icon-jiazaishibai" style="font-size: 14px;margin-right: 5px"></span>
                              <span>{{ item.label }}</span>
                            </div>
                          </div>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="简介">
                <el-input
                    rows="8"
                    autosize
                    v-model="form.introduction"
                    maxlength="2000"
                    :placeholder="placeholderText"
                    show-word-limit
                    type="textarea"
                />
              </el-form-item>
              <el-button @click="aaa()">等会让</el-button>
              <el-form-item label="定时发布">
                <el-switch v-model="switchSelect"/>
                <span style="margin-left: 10px;color: rgb(173,176,182)">(当前+2小时≤可选时间≤当前+15天，定时发布-经选择不支持修改/取消)</span>
                <div v-if="switchSelect === true" style="margin-top:10px;width: 800px">
                  <el-config-provider :locale="zhCn">
                    <el-date-picker v-model="form.fixedDate"
                                    type="date"

                                    placeholder="选择今天及今天之后的日期"
                                    :disabled-date="disabledDate">
                    </el-date-picker>
                    <el-time-picker
                        value-format="hh:mm:ss"
                        style="margin-left: 20px"
                        v-model="form.fixedTime"
                        :disabled-hours="disabledHours"
                        :disabled-minutes="disabledMinutes"
                        placeholder="请选择时间">
                    </el-time-picker>
                  </el-config-provider>
                </div>
              </el-form-item>
              <el-form-item label="二创设置">
                <el-checkbox label="允许二创" name="type" v-model="form.secondCreated"/>
              </el-form-item>
              <el-form-item label="商业推广">
                <el-checkbox label="增加商业推广信息" name="type" v-model="form.promotion"/>
              </el-form-item>
              <el-form-item label="自制声明">
                <el-checkbox label="未经作者授权 禁止转载" name="type" v-model="form.original"/>
              </el-form-item>
              <el-form-item>
                <div class="submit-container">
                  <span class="submit-draft submit-common">存草稿</span>
                  <span class="submit-add submit-common" @click="onSubmit('ruleForm')">立即投稿</span>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ElConfigProvider} from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import axios from "axios";


export default {
  name: "videoUpload",
  components: {[ElConfigProvider.name]: ElConfigProvider},
  data() {
    return {
      //视频是否上传完成
      uploadSuccess: false,
      //实现视频类型 懒加载
      districtData: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          // 获取二级菜单 node.level 代表几级菜单 从0开始 leaf为true代表是最后一级
          if (node.level === 1) {
            if (node.value === undefined) {
              node.value = 1
            }
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            let nodes = [];
            this.$util.get("hilihili/district/getDistrictItem", {parentId: node.value}).then(res => {
              res.data.map((item) => {
                let area = {
                  value: item.value,
                  label: item.label,
                  leaf: true,
                };
                nodes.push(area)
              })
              resolve(nodes);
            })
          } else {
            // 获取一级菜单 node.level 代表几级菜单 从0开始
            let nodes = [];
            this.$util.get("hilihili/district/getDistrict").then(res => {
              res.data.map((item) => {
                let area = {
                  value: item.value,
                  label: item.label,
                  leaf: false,
                };
                nodes.push(area)
              })
              resolve(nodes);
            })
          }
        }
      },
      zhCn,
      // 日期禁用规则
      disabledDate: (time) => {
        if (new Date().getHours() > 22) {
          return time.getTime() > (Date.now() + 3600 * 1000 * 24 * 15) || time.getTime() < Date.now()
        }
        return time.getTime() > (Date.now() + 3600 * 1000 * 24 * 15) || time.getTime() < (Date.now() - 3600 * 1000 * 24)
      },
      makeRange: (start, end) => {
        const result = []
        for (let i = start; i <= end; i++) {
          result.push(i)
        }
        return result
      },
      // 小时禁用规则
      disabledHours: () => {
        if (this.form.fixedDate != undefined && (this.form.fixedDate).getDate() != undefined && (this.form.fixedDate).getDate() == (new Date().getDate())) {
          return this.makeRange(0, new Date().getHours() + 1)
        }
      },
      disabledMinutes: (hour) => {
        if (this.form.fixedDate != undefined && (this.form.fixedDate).getDate() != undefined && (this.form.fixedDate).getDate() == (new Date().getDate())) {
          if (hour != '') {
            return this.makeRange(0, new Date().getMinutes())
          }
        }
      },
      uploadList: [],
      // 简介
      placeholderText: '创作类型:原创编舞\n' +
          '编舞出处:翻跳请务必填写编舞出处\n' +
          '舞者:多人请用逗号隔开\n' +
          '歌曲名:请注明使用歌曲名称\n' +
          '歌曲出处:请注明使用歌曲来源\n' +
          '摄影:\n' +
          '后期:..\n' +
          '简介....\n',
      // 标签模拟数据
      optionsLabel: [
        {
          value: 'HTML',
          label: 'HTML',
        },
        {
          value: 'CSS',
          label: 'CSS',
        },
        {
          value: 'JavaScript',
          label: 'JavaScript',
        },
      ],
      //是否选择定时发送
      switchSelect: false,
      themLabel: null,
      // 话题标签的值
      themLabelTitle: '',
      // 题标签显示选中的下标
      themLabelIndex: null,
      // disabledHours:'',
      // disabledMinutes:'',
      // disabledSeconds:'',
      // 后台主题标签的值
      themeList: [],
      // 后台标签的值
      labelList: [],
      // 推荐标签的值，用于提交
      labelListCopy: [],
      // 默认可以添加10个标签
      labelCount: 8,
      inputValue: '',
      // 确保回车添加的标签具有唯一值
      labelListLength: null,
      form: {},
      cascaderShow: false,
      baseUrl: "http://127.0.0.1:9090/poll?imageUrl=",
      image: null,
      topic: null,
      loadProgress: 0,
      fileMD5: "",
      curIndex: 0


    }
  },
  created() {
//第一次进入页面直接上传视频

  },
  watch: {},
  mounted() {
    this.$refs.upload.$el.querySelector('.upload-button').click();
    this.$refs.upload.submit();
    // 关闭浏览器执行退出接口--
    // onUnload方法是在关闭窗口之后执行
    // onbeforeUnload方法是在关闭窗口之前执行
    window.onbeforeunload = this.handlePageClose
    window.onunload = this.deleteVideo
  },
  methods: {
    deleteVideo() {
      if (this.form.id != undefined || this.form.id != null) {
        //像后端发送请求 删除缓存文件
        let uncommittedImages= JSON.parse(localStorage.getItem("uncommittedImages"))
        let uncommittedVideos=JSON.parse(localStorage.getItem("uncommittedVideos"))
        fetch("http://127.0.0.1:9090/hilihili/upload/delete", {
          method: "DELETE", // fetch支持GET、POST、PUT、DELETE的请求方法
          headers: {
            "Content-Type": "application/json",
            "Authorization": 'Bearer ' + JSON.parse(localStorage.getItem('userInfo')).token
          }, // 请求数据
          body:JSON.stringify({
            videoIds:uncommittedVideos,
            images:uncommittedImages
          }),
          keepalive: true, // 保持在后台连接
        });
        //清空未上传文件list
        uncommittedImages = []
        uncommittedVideos = []
        localStorage.setItem("uncommittedImages",JSON.stringify(uncommittedImages))
        localStorage.setItem("uncommittedVideos",JSON.stringify(uncommittedVideos))
      }

      return "";
    },
    //获取视频分类相关信息
    async getTag(value) {
      await this.$util.get("hilihili/district/getTag", {tag: value.toString()}).then(res => {
        this.labelList = res.data
        this.labelListLength = res.data.length
      })
      await this.$util.get("hilihili/district/getTopic", {tag: value.toString()}).then(res => {
        this.themeList = res.data
      })
      this.cascaderShow = true
    },
    // 文件上传 进度条
    uploadVideo(param) {
      console.log("uploadVideo")
      let formData = new FormData();
      formData.append("file", param.file)
      // 防止更换视频使用第一次生成的videoId
      if (this.form.id != undefined || this.form.id != null) {
        formData.append("videoId", this.form.id)
      }
      axios({
        method: 'post',
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: formData,
        url: "http://127.0.0.1:9090/hilihili/upload",
        //文件上传进度条回调函数
        onUploadProgress: progressEvent => {
          this.loadProgress = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1))

        }
      }).then((res) => {
        const data = res.data.data
        const code = res.data.code

        if (code === 401) {
          this.$message({
            type: 'error',
            message: '请先登录!'
          })
          return
        }
        if (code == 200) {
          //将视频加入上传列表
          this.$message.success('上传成功');
          //上传成功 填充提交视频表单数据 视频封面回显
          this.uploadSuccess = true;
          this.image = this.baseUrl + data.poster
          this.form.img = data.poster
          this.form.id = data.videoId
          this.form.link = data.m3u8
          this.form.title = data.title
          this.form.videoMD5 = data.md5
          let uncommittedVideos = JSON.parse(localStorage.getItem("uncommittedVideos"))
          let uncommittedImages = JSON.parse(localStorage.getItem("uncommittedImages"))
          if (uncommittedImages == null){
            uncommittedImages = new Array()
          }
          if (uncommittedVideos == null){
            uncommittedVideos = new Array()
          }
          uncommittedImages.push(data.poster)
          uncommittedVideos.push(data.videoId)
          //将未提交的文件保存到本地 当浏览器或页面关闭时 发送请求到后台将其删除
          localStorage.setItem("uncommittedVideos",JSON.stringify(uncommittedVideos))
          localStorage.setItem("uncommittedImages",JSON.stringify(uncommittedImages))
          this.uploadSuc()
        } else {
          this.$message.error('上传失败');
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 文件上传之前做处理
    beforeUploadVideo(file) {
      this.form.fileType = "small";
      console.log(file.size)
      const fileSize = file.size / 1024 / 1024;
      if (fileSize > 100) {
        this.form.fileType = "large";
      }
      const isLt10M = file.size > 1024 * 1024 * 1024 * 1024
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (isLt10M) {
        this.$message.error('上传视频大小不能超过10GB哦!')
        return false
      }
      // 获取视频时长
      var url = URL.createObjectURL(file)
      var audioElement = new Audio(url)
      audioElement.addEventListener('loadedmetadata', function () {
        // 时长为秒，小数，182.36
        this.form.duration = parseInt(audioElement.duration);
      }.bind(this))

    },
    uploadSuc(){
      this.uploadList.push(this.form)
      this.curIndex = this.uploadList.length - 1
      this.form = this.uploadList[this.curIndex]
      //设置选中的视频下标
      this.taskSelect = this.curIndex
      this.image = this.baseUrl + this.form.img
      this.labelListCopy = []
      this.topic = null
    },
    //保存视频表单对象
    saveVideoFrom(form) {
      if (this.uploadList.length == 0){
        return
      }
      //构建表单对象
      //切换之前保存表单数据 默认为0
      this.uploadList[this.curIndex] = {
        district: form.district,
        fixedDate: form.fixedDate,
        fixedTime: form.fixedTime,
        id: form.id,
        img: form.img,
        introduction: form.introduction,
        link: form.link,
        secondCreated: form.secondCreated,
        title: form.title,
        promotion: form.promotion,
        original: form.original,
        up: form.up,
        tag: this.labelListCopy,
        topic: this.topic,
        isTransfer: form.isTransfer,
        transferAddress: form.transferAddress,
        duration: form.duration,
        fileType: form.fileType,
        videoMD5: form.videoMD5,
        themeList : this.themeList,
        labelList : this.labelList,
        switchSelect : this.switchSelect,
        themLabelIndex: this.themLabelIndex,
      }
    },
    // 切换其他视频时需要改变form表单数据
    changeFormList(index,ops) {
      //切换前先保存当前页面表单的数据 ops true为点击切换 false 为提交成功后系统调用
      if (ops){
        this.saveVideoFrom(this.form)
      }
      //保存当前上传视频下标 用于下次保存当前表单数据
      this.curIndex = index
      //切换点击页数据
      this.form = this.uploadList[index]
      //显示图片
      this.image = this.baseUrl + this.form.img
      this.labelListCopy = this.form.tag
      this.topic = this.form.topic
      this.switchSelect = this.form.switchSelect
      this.themeList = this.form.themeList
      this.labelList = this.form.labelList
      this.themLabelTitle = this.form.topic==null ? "":this.form.topic.label
      this.themLabelIndex = this.form.themLabelIndex
    },
    // input回车触发
    keyEnter() {
      if (this.labelCount <= 0) {
        this.inputValue = ''
        return;
      }
      if (!this.inputValue) return
      this.labelCount -= 1
      let newDom = {
        index: this.labelListLength,
        label: (this.inputValue + this.labelList.length),
        value: this.inputValue
      }
      this.labelListCopy.push(newDom)
      this.inputValue = ''
      this.labelListLength += 1
    },
    // 控制标签个数
    addLabelList(item, index) {
      if (this.labelCount <= 0) return
      this.labelCount -= 1
      this.labelListCopy.push(item);
      this.changeLabelStyle(true, index)
    },
    // 改变标签颜色
    changeLabelStyle(value, index) {
      if (eval('this.$refs.labelRef' + index) === undefined) return;
      let ref = eval('this.$refs.labelRef' + index)[0]
      if (ref === undefined) return
      if (value) {
        // 增加样式
        ref.classList.add('not-go-index')
        ref.style.backgroundColor = '#00a1d6'
        ref.style.color = '#ffffff'
      } else {
        // delete样式
        ref.classList.remove('not-go-index')
        ref.style.backgroundColor = '#f6f6f6'
        ref.style.color = '#212121'
      }
    },
    // 表单提交
    onSubmit(formName) {
      // 表单验证
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('“success submit!!”');
        } else {
          console.log('“error submit!!”');
          return
        }
      })
      this.form.up = this.$store.state.userInfo.userId
      this.form.tag = this.labelListCopy
      this.form.topic = this.topic

      this.$util.post("hilihili/upload/submit", this.form).then(res => {
        if (res.code == 200) {
          //在未提交list中删除
          let uncommittedImages = JSON.parse(localStorage.getItem("uncommittedImages"))
          let uncommittedVideos = JSON.parse(localStorage.getItem("uncommittedVideos"))
          //获取下标
          let imagIndex = uncommittedImages.indexOf(this.form.img);
          let videoIndex = uncommittedVideos.indexOf(this.form.id);
          //删除元素
          if (imagIndex != -1) {
            uncommittedImages.splice(imagIndex, 1);
            localStorage.setItem("uncommittedImages",JSON.stringify(uncommittedImages))
          }
          if (videoIndex != -1) {
            uncommittedVideos.splice(videoIndex, 1);
            localStorage.setItem("uncommittedVideos",JSON.stringify(uncommittedVideos))
          }
          this.$message.success(res.msg)
          //如果只有一个元素 直接重置所有表单信息
          if (this.uploadList.length == 1){
            this.uploadSuccess = false
            this.clearFrom();
           // 删除当先下标视频
            this.uploadList.splice(this.curIndex,1);
            return
          }
           // 为第一个切换成上一个 最后一个则切换为后一个
            if (this.curIndex != 0){
              this.changeFormList(this.curIndex - 1,false)
            }else {
              this.changeFormList(this.curIndex + 1,false)
            }
          this.uploadList.splice(this.curIndex,1);
          //如果没有元素 直接重置所有表单信息
          if (this.uploadList.length == 0){
            this.uploadSuccess = false
            this.clearFrom();
            return
          }
        }
        if (res.code == 500) {
          this.$message.error(res.msg)
        }
      })
    },
    // 添加上传视频
    addVideoItem() {
      //添加前先把上一次页面的数据保存到list里
      this.saveVideoFrom(this.form)
      //清除表单数据
      this.clearFrom()
      //js 代码点击el-upload里的按钮 触发 文件选择弹窗
      this.$refs.upload.$el.querySelector('.upload-button').click();
      this.$refs.upload.submit();

    },
    // 选择分区
    handleChange() {

    },
    //关闭当前页面时调用的函数
    handlePageClose(e) {

      return ''
    },
    // 上传图片
    uploadFile: function (item) {
      this.image = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址
      let formData = new FormData();
      formData.append("file", item.raw);
      formData.append("videoId", this.form.id);
      formData.append("userId", this.$store.state.userInfo.userId);
      axios({
        method: 'post',
        headers: {
          "Content-Type": "multipart/form-data"
        },
        data: formData,
        url: "http://127.0.0.1:9090/hilihili/upload/image"
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
        }
        if (res.code == 500) {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        console.log(err)
      })

    },
    handleRemove() {
      this.image = ""
    },
    //清空表单
    clearFrom() {
      this.$refs.upload.clearFiles();
      this.loadProgress = 0;
      this.image = ""
      this.form.district = []
      this.form.fixedDate = null
      this.form.fixedTime = null
      this.form.id = null
      this.form.img = ""
      this.form.introduction = ""
      this.form.link = ""
      this.form.secondCreated = false
      this.form.title = ""
      this.form.promotion = false
      this.form.original = false
      this.form.up = ""
      this.labelListCopy = []
      this.topic = null
      this.form.isTransfer = ""
      this.form.transferAddress = ""
      this.form.duration = null
      this.form.fileType = ""
      this.form.videoMD5 = ""
      this.themLabelTitle = ""
      this.labelListLength = 0
      this.themeList = []
      this.labelList = []
      this.switchSelect = false
    },
    replaceVideo() {
      //调用手动上传接口 重置上传文件 文件上传进度条 视频封面
      this.clearFrom()
      //js 代码点击el-upload里的按钮 触发 文件选择弹窗
      this.$refs.upload.$el.querySelector('.upload-button').click();
      this.$refs.upload.submit();
      // this.form = this.uploadList[this.curIndex]
      // this.image = this.baseUrl + this.form.img
    },

  }
}
</script>
<style>
/*日期禁用背景颜色*/
.disabled {
  background: #ffffff;
}

/*动态添加样式*/
.not-go-index {
  /*background: #00a1d6;*/
  /*color: #f0f0f0;*/
  cursor: not-allowed;
  /*禁止点击事件*/
  pointer-events: none;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.myselect .el-select {
  width: 860px;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 12px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>

<style scoped>

.marginBut {
  margin-bottom: 10px;
}

.avatar-uploader .avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.deleteImg {
  font-size: 16px;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 999;
}

.el-upload-img {
  width: 150px;
  height: 150px;
  /*background-repeat: no-repeat;*/
}

.taskSelected {
  background: #00aeec;
  color: #fff;
}

.taskNotSelected {
  background: #ffffff;
  color: black;
}

.taskStatusSuccess {
  color: #43ce5b;
}

.body-bg {
  background-color: rgb(250, 250, 250);
  box-sizing: border-box;
  font-family: PingFang SC, Source Han Sans CN, Microsoft YaHei, Arial, Helvetica, sans-serif;
}

.content {
  background-color: #ffffff;
  width: 1100px;
  /*margin-top: 16px;*/
  height: 100%;
  min-width: 1000px;
  max-width: 1100px;
  margin: 0 auto 0;
  box-sizing: border-box;
  color: #999;
  font-size: 16px;
}

.content-queue {
  padding: 10px 10px 10px 31px;
}

.video-queue {
  height: 100%;
  overflow: hidden;
}

.video-queue-title {
  position: relative;
  font-size: 16px;
  /*line-height: 22px;*/
  font-weight: 600;
  color: #212121;
  line-height: 28px;
  height: 70px;
  box-shadow: 0 1px 0 #e7e7e7;
  display: flex;
  align-items: center;
}

.video-queue-title-text {
  padding-left: 2px;
}

.video-queue-title-btn-wrp {
  left: 895px;
  position: absolute;
}

.video-queue-title-btn {
  color: #61666d;
  font-size: 14px !important;
  padding: 12px 16px !important;
}

.video-save-btn {
  color: #fff;
  background: #00a1d6;
  border: 1px solid #00a1d6;
  font-size: 14px !important;
  padding: 12px 16px !important;
}

.bcc-button--default {
  border: 1px solid #e7e7e7;
  background: #fff;
  /*color: #505050;*/
}

.bcc-button {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
  user-select: none;
  position: relative;
  line-height: 1;
}

.task-list {
  display: flex;
  width: 987px;
  align-items: center;
  margin-top: 11px;
  padding: 12px;
  padding-bottom: 0;
  background: #eeeeef;
  border-radius: 10px;
  flex-wrap: wrap;
}

.task-item {
  height: 70px;
  max-width: 218px;
  position: relative;
}

.title-btn {
  cursor: pointer;
  width: 98px;
  height: 60px;
  font-size: 12px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #61666d;
  margin-bottom: 10px;
}

.task {
  height: 60px;
  max-width: 100%;
  transition: all .2s ease-in-out;
  padding: 10px 6px 10px 12px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  z-index: 1;
}

.task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 10;
  flex: 1;
  font-size: 14px;
  line-height: 16px;
  display: flex;
  align-items: center;
}

.task-title-icon {
  z-index: 1000;
}

.text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 10;
}


.task-status {
  font-size: 12px;
  padding-top: 8px;
  display: flex;
  align-items: center;
  z-index: 10;
}

.icon {
  width: 12px;
  height: 12px;
  z-index: 10;
}

.icon-sprite {
  /*width: 20px;*/
  /*height: 20px;*/
  fill: currentColor;
  vertical-align: -0.15em;
  overflow: hidden;
  font-size: inherit;
  line-height: inherit;
}

.task-delete {
  position: absolute;
  right: 6px;
  top: 7px;
  height: 20px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  z-index: 10;
}

.off {
  width: 10px;
  height: 10px;
  cursor: pointer;
  z-index: 10;
}

/*无重复*/
.title-btn {
  cursor: pointer;
  width: 98px;
  height: 60px;
  font-size: 12px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #61666d;
  margin-bottom: 10px;
}

.title-btn svg {
  width: 24px;
  height: 24px;
}

.content-detail {
  background-color: #ffffff;
  width: 1100px;
  /*margin-top: 16px;*/
  height: 100%;
  min-width: 1000px;
  max-width: 1100px;
  margin: 0 auto 0;
  flex: 1;
  position: relative;
  display: flow-root;
  min-height: 100%;
  /*margin: 0 0 50px 0;*/
}

.video-basic {
  background: #fff;
  flex-direction: column;
}

.video-file {
  width: 80%;
  min-width: 900px;
}

.title {
  display: flex;
  position: relative;
  align-items: center;
  font-size: 14px;
  color: #212121;
  line-height: 20px;
  padding: 10px 10px 0 31px;
}

.file {
  display: flex;
  padding: 20px 20px 20px 0;
}

.title-text {
  min-width: 100px;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-icon-wrp {
  margin: 0 10px 0 32px;
  width: 30px;
  height: 38px;
  border-radius: 8px;
}

.file-detail {
  flex: 1;
}

.file-status {
  display: flex;
}

.file-progress {
  position: relative;
  overflow: hidden;
  /*width: 100%;*/
}

.file-progress-div {
  position: absolute;
  height: 14px;
  width: 50px;
  right: 0;
  z-index: 5;
  background-color: #ffffff;
}

.success {
  color: #43ce5b;
}

.file-status-text {
  flex: 1;
  height: 20px;
  font-size: 14px;
  color: #999;
  line-height: 28px;
  display: flex;
  align-items: center;
}

.file-status-manage-refresh {
  color: #00a1d6;
  cursor: pointer;
}

.file-status-manage {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-right: 54px;
}

.form {
  margin: 12px 50px 0 30px;
  background: #fff;
  /*width: 80%;*/
  width: 900px;
  min-width: 900px;
}

.tag-wrp {
  display: flex;
}

.tag-label {
  font-size: 14px;
  color: #222;
  /*padding: 14px 0 0 134px;*/
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.hot-tag-item {
  font-size: 12px;
  line-height: 28px;
}

.tag-topic-list {
  display: flex;
  flex-wrap: wrap;
  width: 676px;
}

.hot-tag-container {
  text-align: center;
  padding: 0 15px 0 10px;
  margin: 6px 0 6px 12px;
  height: 30px;
  /*color: #6d757a;*/
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  line-height: 14px;
  border: none;
}

.hot-tag-container2 {
  background: #f6f6f6;
  color: #212121;
  text-align: center;
  padding: 0 15px 0 10px;
  margin: 6px 0 6px 12px;
  height: 30px;
  /*color: #6d757a;*/
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  line-height: 14px;
  border: none;
}

.hot-tag-container-next {
  background: #f6f6f6;
  color: #212121;
}

.hot-tag-item {
  font-size: 12px;
  line-height: 28px;
}

.tag-input-wrp {
  flex: 1;
}

.input-container {
  background: hsla(0, 0%, 84.7%, 0);
  border: 1px solid #ccd0d7;
  border-radius: 4px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  transition: border .3s ease;
}

.tag-pre-wrp {
  display: flex;
  flex-wrap: wrap;
}

.label-item-v2-container {
  color: #f0f0f0;
  margin: 4px 6px 4px 0;
  background: #00a1d6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 9px 0 11px;
  cursor: pointer;
}

.label-item-v2-content {
  font-size: 12px;
}

.input-instance {
  flex: 1;
  min-width: 200px;
  margin: 6px 0;
}

.input-val {
  display: block;
  width: 100%;
  color: #222;
  line-height: 22px;
  height: 22px;
  font-size: 14px;
  outline: 0;
  appearance: none;
  border: 0;
  background-color: transparent;
}

.tag-last-wrp {
  font-size: 14px;
  color: #858585;
  margin: 8px 0 8px 12px;
  cursor: default;
}

.tag-container {
  display: flex;
  align-items: center;
}

.submit-container {
  padding: 32px 0 32px 134px;
  position: relative;
}

.submit-draft {
  line-height: 38px;
  border: 1px solid #ccc;
  color: #505050;
  background: #fff;


}

.submit-common {
  display: inline-block;
  height: 40px;
  font-size: 14px;
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
  width: 120px;
  cursor: pointer;
  user-select: none;
  transition: all .5s ease-in-out;
}

.submit-add {
  margin-left: 16px;
  line-height: 40px;
  color: #fff;
  background: #00a1d6;
}
</style>
